<html>
    <head>

    </head>
    <body>
        <div id="triangle">

        </div>
        <div id="diamond">

        </div>
        <div class="pentagram">

        </div>
        <div class="hexagonal_star">

        </div>
        <style>
            #triangle{
                height: 0;
                width: 0;
                border-bottom: 0;
                border-left: 200px solid transparent;
                border-right: 200px solid transparent;
                border-top: 300px solid burlywood;
                margin: 150px;
            }
            #diamond{
                margin: 150px;
                height: 300px;
                width: 300px;
                background-color:cornflowerblue;
                transform: rotate(45deg);
            }
            /**
            *1/tan(36deg)= 1.3763819204711738
            */
            .pentagram {
                margin: 200px;
                width:0;
                height:0;
                border-top-color: red;
                border-left-color: transparent;
                border-right-color: transparent;
                border-top-width: 100.00px;
                border-left-width: 137.63px;
                border-right-width: 137.63px;
                border-bottom: 0;
                border-style:solid;
                position: relative;
            }
            .pentagram:before{
                content: '';
                display: block;
                width:0;
                height:0;
                border-top-color: red;
                border-left-color: transparent;
                border-right-color: transparent;
                border-top-width: 100.00px;
                border-left-width: 137.63px;
                border-right-width: 137.63px;
                border-style:solid;
                border-bottom: 0;

                position: absolute;
                top: -100.00px;
                left: -137.63px;

                transform: rotate(72deg);
                /**
                *137.63px*Math.tan(18deg)= 44.7089502016479
                */
                transform-origin:137.63px 44.70px;
            }
            .pentagram::after{
                content: '';
                display: block;
                width:0;
                height:0;
                border-top-color: red;
                border-left-color: transparent;
                border-right-color: transparent;
                border-top-width: 100.00px;
                border-left-width: 137.63px;
                border-right-width: 137.63px;
                border-style:solid;
                border-bottom: 0;

                position: absolute;
                top: -100.00px;
                left: -137.6px;

                transform: rotate(-72deg);
                transform-origin:137.63px 44.70px;
            }
            .hexagonal_star{
                margin: 200px;
                display: block;
                width: 0;
                height: 0;
                border-left: 100.00px solid transparent;
                border-right: 100.00px solid transparent;
                /**Math.tan(30deg)=1.7321**/
                border-bottom: 173.21px solid gold;
                position: relative;
            }
            .hexagonal_star::after{
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-left: 100.00px solid transparent;
                border-right: 100.00px solid transparent;
                border-bottom: 173.21px solid gold;
                position: absolute;
                left: -100.00px;
                /**Math.tan(30deg)=0.5773**/
                top: 57.73px;
                transform: rotate(180deg);
            }
        </style>
    </body>
</html>